<template>
  <Modal
    v-model="config"
    width="800"
    class="modal-tips"
    :mask-closable="false"
    draggable
    :sticky="true"
    footer-hide
    title="批量设置DNS"
    @on-cancel="cancel"
  >
    <div
      v-if="getDNSLoading"
      class="user-main-box"
      style="position: relative; width: 100%; height: 400px"
    >
      <Spin :with-icon="true"></Spin>
    </div>
    <template v-else>
      <div v-if="getDNSResult" class="user-main-box">
        <div
          class="form-input-area"
          style="padding: 20px 30px 30px; position: relative"
        >
          <Spin v-if="formLoading" :with-icon="true"></Spin>
          <div
            class="tips-area tips-icon"
            :style="{
              backgroundImage: `url(${require('_a/userImages/' +
                (colorType == 0
                  ? 'tips-icon'
                  : colorType == 1
                  ? 'tips-icon-g'
                  : colorType == 2
                  ? 'tips-icon-b'
                  : 'tips-icon-p') +
                '@2x.png')})`,
            }"
            style="
              margin-bottom: 20px;
              background-position: 0 0;
              padding: 0 0 0 25px;
            "
          >
            温馨提示：若您的域名已添加解析记录，请勿随意修改解析DNS，否则将导致原解析记录不生效，请谨慎操作！
          </div>
          <div class="flx-row-s-c div-line">
            <div class="long-name long-name-nece">DNS类型</div>
            <RadioGroup v-model="type">
              <Radio
                v-for="(item, index) in typeList"
                :key="index"
                class="radio-mg-r-20"
                :label="item.value"
                >{{ item.name }}</Radio
              >
            </RadioGroup>
          </div>
          <div class="flx-row-s-s div-line">
            <div class="long-name long-name-nece">DNS记录值</div>
            <div v-if="type == 0" class="flx-row-s-c dns-list-area">
              <div
                v-for="(item, index) in dnsList0"
                :key="'i' + index"
                class="flx-row-s-c"
                style="margin-bottom: 10px; height: 32px"
              >
                <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
                <div class="f-d2" style="width: 200px; margin-right: 10px">
                  {{ item }}
                </div>
              </div>
            </div>
            <div v-else-if="type == 2" class="flx-row-s-c dns-list-area">
              <div
                v-for="(item, index) in dnsList1"
                :key="'i' + index"
                class="flx-row-s-c"
                style="margin-bottom: 10px; height: 32px"
              >
                <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
                <div class="f-d2" style="width: 200px; margin-right: 10px">
                  {{ item }}
                </div>
              </div>
            </div>
            <div v-else-if="type == 1" class="flx-row-s-c dns-list-area">
              <div
                v-for="(item, index) in dnsInputList"
                :key="'i' + index"
                class="flx-row-s-c"
                style="margin-bottom: 10px"
              >
                <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
                <Input
                  v-model.trim="dnsInputList[index]"
                  placeholder="请填写"
                  style="width: 200px; margin-right: 10px"
                />
              </div>
            </div>
            <!-- <Input
              v-model.trim="test"
              placeholder="请填写"
              style="width: 200px"
            /> -->
          </div>
          <div
            class="
              user-strong-button
              submit-button-style submit-button-style-first
              div-line
            "
            @click="submit"
          >
            确定修改
          </div>
          <div class="flx-row-s-c submit-button-style-first div-line">
            <Checkbox v-model="agree"></Checkbox>
            我已同意并阅读
            <span class="b-form-font-button" @click="ruleModelShow = true"
              >《{{ ruleTitle }}》</span
            >
          </div>
        </div>
      </div>
      <div v-else class="user-main-box">
        <Empty-State content="DNS信息加载失败！"></Empty-State>
      </div>
    </template>
    <rule-modal
      :show.sync="ruleModelShow"
      :content="ruleContent"
      :title="ruleTitle"
    ></rule-modal>
    <!-- 批量设置DNS结果 -->
    <renewResultModal
      :show.sync="settingsDNSResultModalShow"
      title="设置DNS结果"
      btn-title="确定"
      :list="settingsDNSResulList"
      @confirm="settingsDNSResulConfirm"
    ></renewResultModal>
  </Modal>
</template>
<script>
import dnsRules from "@/static/dnsRules";
import { setDNS, getDNS } from "@/api/user";
import { getBottom } from "@/api/data";

export default {
  name: "SettingsDNS",
  components: {
    ruleModal: () => import("_c/modal/ruleModal/ruleModal"),
    renewResultModal: () =>
      import("_c/modal/renewResultModal/renewResultModal"),
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    domainIds: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      colorType: 0,
      getDNSLoading: false,
      getDNSResult: null,
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",
      type: 2,
      typeList: [
        {
          name: "出售页DNS",
          value: 0,
        },
        {
          name: "解析DNS",
          value: 2,
        },
        {
          name: "第三方DNS",
          value: 1,
        },
      ],
      formLoading: false,
      agree: false,
      settingsDNSResultModalShow: false,
      settingsDNSResulList: [],
    };
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  watch: {
    config(val) {
      if (val) {
        this.ruleTitle = dnsRules.title;
        this.ruleContent = dnsRules.content;
        this.getDNSLoading = true;
        this.getDNS();
      }
    },
  },
  mounted() {
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    cancel() {
      this.config = false;
    },
    // 获取DNS
    async getDNS() {
      const res = await getDNS({
        domainId: null,
      });
      this.getDNSLoading = false;
      if (res.code === 200) {
        this.dnsList0 = res.data.defaultValueList.filter(
          (item) => item.dnsPlatform === 0
        )[0].values;
        this.dnsList1 = res.data.defaultValueList.filter(
          (item) => item.dnsPlatform === 2
        )[0].values;
        if (res.data.dnsPlatform === 0) {
          this.dnsList0 = res.data.dnsList;
        } else if (res.data.dnsPlatform === 2) {
          this.dnsList1 = res.data.dnsList;
        } else if (res.data.dnsPlatform === 1) {
          for (const i in res.data.dnsList) {
            this.dnsInputList[i] = res.data.dnsList[i];
          }
        }
        this.getDNSResult = true;
      }
    },
    // 提交表单
    submit() {
      if (this.type == null) {
        this.$Message.warning("请选择DNS类型！");
        return;
      }
      if (!this.agree) {
        this.$Message.warning(`请同意并阅读《${this.ruleTitle}》！`);
        return;
      }
      const params = {
        domainIds: this.domainIds,
        dnsPlatform: this.type,
      };
      if (this.type === 1) {
        const DNSList = this.dnsInputList.filter(
          (item) => item != null && item !== ""
        );
        if (DNSList.length <= 0) {
          this.$Message.warning("请至少输入一个DNS！");
          return;
        }
        params.dnsList = DNSList;
      }
      this.$Modal.confirm({
        title: "确认修改",
        content: "<p>确定要修改DNS设置吗？</p>",
        onOk: async () => {
          this.formLoading = true;
          const res = await setDNS(params);
          if (res.code === 200) {
            if (res.data.length === 0) {
              this.$Message.success("修改成功！");
            } else {
              this.settingsDNSResultModalShow = true;
              this.settingsDNSResulList = res.data;
            }
            this.formLoading = false;
            this.config = false;
          }
        },
      });
    },
    // 设置DNS结果确认事件
    settingsDNSResulConfirm() {
      this.settingsDNSResultModalShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.user-main-box {
  .with-padding {
    min-height: 300px;
    padding: 80px;
  }
}
</style>
